<template>
  <transition name="el-fade-in-linear">
    <div class="el-dialog" v-if="visible" :style="{width: width}">
      <div class="el-dialog__header"><span class="el-dialog__title">{{title}}</span>
        <button type="button" class="el-dialog__headerbtn" @click="colse"><i
          class="el-dialog__close el-icon el-icon-close"></i></button>
      </div>
      <div class="el-dialog__body">
        <slot name="dialogBody" />
      </div>
      <div class="el-dialog__footer">
        <slot name="dialogFoot" />
      </div>
    </div>
  </transition>
</template>

<script>
  export default {
    props: {
      title: {
        type: String,
        default: '新增'
      },
      visible: {
        type: Boolean,
        default: false
      },
      width: {
        type: String,
        default: '500px'
      },
    },
    name: "index",
    methods: {
      colse() {
        this.$emit('colse')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .el-dialog {
    width: 500px;
    cursor: move;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2000;
  }
</style>
